前端打包工具

2023-04-06 23:10| 来源: 网络整理| 查看: 265

介绍构造1、开发服务器服务器原理2、打包构建指令 ESBuild=======================在项目内安装安装Vite查看版本安装和配置Vue31、安装Vue32、引入Vue33、安装插件4、配置=======================启动本地开发服务器构架生产环境-Vue3项目预览生成环境项目配置脚本=======================Vite脚手架创建Vue3项目=======================其他配置别名 alias开发服务器代理 proxy （重要，解决跨域）特点CSS 和 JSON其他CSS路径urlJSX第三方包预编译========================插件plugin组件按需加载（重要）更多插件LESSPOSTCSS

mock模拟数据

介绍

官方githubhttps://github.com/vitejs/vite

官网：https://cn.vitejs.dev/

Vite是Vue官方开发的

构造

1、开发服务器

基于原生ES模块，现代浏览器都支持ES模块化（import、export），能直接运行，省去了webpack构建的过程（webpack每次修改都会自动构建一次，把构建的文件放到内存运行）

那是不是不用构建工具？肯定是要的。

1、因为你还有很多文件，如.vue，.ts，.less等文件，这些浏览器是无法直接识别。而Vite会把这些文件转成JS，让他和其他JS代码跑在浏览器上。

2、如果你项目依赖很多包，没有构建工具的情况下，浏览器访问会全部一次请求过来，可能会有几百个文件，严重影响浏览器和服务器性能。而Vite用到哪些包，才请求哪些包，不需要一次请求过来。

服务器原理

vite1 之前是用Koa作为本地服务器，后来改为了Connect，因为这个服务器很容易做请求的转发。

比如我编写了xxx.ts，这个浏览器是不支持的，启动服务器时，Vite会把xxx.ts转换成ES6 JS代码。

用户访问服务器时，Connect服务器看到你要xxx.ts文件，他就会给你转换成JS代码的文件

2、打包构建指令 ESBuild

ESBuild 是Go语言实现的，所以可以支持Go的API

（可能有些夸大）

ESBuild为什么这么快呢？1、使用Go语言编写的，可以直接转换成机器代码，而无需经过字节码；

2、ESBuild可以充分利用CPU的多内核，尽可能让它们饱和运行；

3、ESBuild的所有内容都是从零开始编写的，而不是使用第三方，所以从一开始就可以考虑各种性能问题；

=======================

在项目内安装

安装Vite

（官方是推荐直接用命令创建项目）

npm install vite –g # 全局安装npm install vite –D # 局部安装

全局安装：任意一个地方打开命令行，都可以运行vite命令。好处就是全局都可以运行

局部安装：只在项目里面安装，需要在项目内打开命令行，输入npx vite命令才能运行。好处就是项目兼容性好，不会因为全局的vite版本影响项目。

查看版本vite -v

安装和配置Vue3

如果不是通过官方直接创建项目的话，Vite是不自带Vue的，目的就是希望不只是Vue用Vite，其他如React也可以用Vite

1、安装Vue3npm i vue@next -D

2、引入Vue3

然后在入口main.js引入Vue3，和Vue入口APP组件挂载App组件到一个ID为app的元素

3、安装插件

然后安装插件，让Vite对Vue支持Vue3插件

npm install @vitejs/plugin-vue -D

sfc插件（单文件组件，也就是识别 .vue 文件的插件）

npm install @vue/compiler-sfc -D

4、配置

最后创建vite的配置文件：vite.config.js，然后配置插件

=======================

启动本地开发服务器

全局安装的情况下启动：

cd D:/项目的路径vite

局部安装的情况下启动：

cd D:/项目的路径npx vite

如果是用vscode作为编辑器，在左下角可以看到NPM脚本，直接点一下就运行局部安装的vite了，非常方便

构架生产环境-Vue3项目

全局安装的情况下启动：

cd D:/项目的路径vite build

局部安装的情况下启动：

> cd D:/项目的路径> npx vite build

预览生成环境项目

正常我们要把dist里面构架好的文件，放到WEB服务器里面运行，比如微软的IIS、Tomcat、Apache、Nginx等

而Vite提供预览，方便我们跳过这个步骤

全局安装Vite的情况：

vite preview

局部安装Vite的情况：

npx vite preview

配置脚本

后面直接运行npm run 命令即可

=======================

Vite脚手架创建Vue3项目

帮你局部安装了vite，安装了Vue3和Vue3插件

> cd D:/项目的路径> npm init @vitejs/app

会询问用什么框架，可以根据自己的项目选择，目前支持vue和react等，然后问你要不要ts如果选ts，配置会自动变成ts然后可以直接用ts，无需额外安装其他东西

=======================

其他配置

默认有隐藏的配置，免得你手动去弄，开箱即用。

但是如果你想自己配置，也可以。默认是在项目主目录下创建一个名为 vue.config.js 的文件

别名 aliasimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { viteMockServe } from 'vite-plugin-mock';export default defineConfig(({command}) => { return { resolve: { alias: { '@': '/src', } }, plugins: [ vue(), ], };});

如果是用TS，tsconfig.json里面还要配置一下path 才行，否则ts会报错说找不到对应模块

{ "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": ["esnext", "dom"], "paths":{ "@/*": ["./src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]}

开发服务器代理 proxy （重要，解决跨域）

注意！只有在开发dev时有效，打包部署上线时无效

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'// 定义 vite 的配置export default defineConfig(({ command }) => { return { resolve: { // 路径别名 alias: { '@': path.resolve(__dirname, 'src'), } }, // 服务器选项 server: { // http-proxy 代理，原理是改变其他电脑发送请求头RequestHeader的源Origin， // 使得每台电脑的源Origin = 服务器端设置的响应头ResponseHeader的 Access-Control-Allow-Origin 属性， // 浏览器就不会因为安全问题而报错 proxy: { // 固定写法，如果写成'/'会导致Error: socket hang up '/api': { // target: 'http://你的前端服务器IP:前端服务器端口' target: 'http://192.168.0.185:3000', // target: 'http://111.230.235.172', // 是否改变每台访问前端服务器的浏览器的源Origin？true为改变 changeOrigin: true, // 固定写法，因为上面写了/api，实际上我们的请求都不带api，这里要替换掉 rewrite: (path) => path.replace(/^\/api/, '') }, } }, plugins: [ vue(), ], };});

后面axiso的请求要写为：

跨域可以查看 https://www.yuque.com/yejielin/mypn47/krxlh0#AbU2x

特点

CSS 和 JSON

可以直接import进来使用

其他CSS

官方文档有说明，Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

# .scss and .sassnpm install -D sass# .lessnpm install -D less# .styl and .stylusnpm install -D stylus

路径url

可以使用绝对路径和相对路径。

如果用了绝对路径，打包生产时，就会把文件放入dist文件夹内然后对文件名进行哈希化。

JSX

支持，直接写jsx文件即可

第三方包预编译

第一次启动vite服务器的时候，会对较大的第三方包进行预编译，然后储存到node_modules/.vite 文件夹内。

一般这些包是不随随便便修改或者升级的，因此下次再启动直接来读取这部分的代码，就不用再编译了，启动就更快了。

========================

插件plugin

组件按需加载（重要）

根据目前比较强大的UI组件库 Ant Design Vue 2.x 的介绍 https://2x.antdv.com/docs/vue/introduce-cn/，有一个名为 vite-plugin-components 的插件可以做到按需加载组件，并且很多UI组件都支持，如下于是查了一下官方说明：https://github.com/hannoeru/vite-plugin-components，发现还是比较强大的，连其他组件都无需通过components注册了，但是仅限于 /src/components下的 .vue 组件（不管套多少层文件夹，只要在components文件夹下就行）

安装：

npm i vite-plugin-components -D # 或者yarn add vite-plugin-components -D

插件配置（TS版本）：

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// 1、引入插件import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';export default defineConfig({ plugins: [ vue(), // 2、使用插件 ViteComponents({ customComponentResolvers: [AntDesignVueResolver()], }), ]})

更多插件

https://github.com/vitejs/awesome-vite

LESS

css的一种增强的插件，可以查看 https://www.yuque.com/yejielin/mypn47/ghbmfu

安装：

npm i less -D

配置：不用配置，直接可以写xxx.less文件，vite会自动处理

POSTCSS

css前缀转换工具安装：

npm install postcss-loader -D

安装后，要对应的功能要安装对应的插件

安装对应插件：比如下面的是自动添加浏览器前缀，用于适配其他浏览器

npm install postcss-preset-env -D

配置：创建postcss.config.js ，输入配置

mock模拟数据

https://github.com/anncwb/vite-plugin-mock/blob/main/README.zh_CN.md

配置见别名

【本文地址】

前端打包工具

前端打包工具

今日新闻

推荐新闻